<template>
	<view class="page">
		<!-- 自定义头部 -->
		<view class="cu-custom bg-top1" :style="[{height: CustomBar+'px',paddingTop: StatusBar+'px'}]">
			<view class="cu-bar fixed bg-top1" :style="style">
				<view class="action" @tap="back">
					<text class="cuIcon-back text-white"></text>
				</view>
				<view class="content text-white" :style="[{top:StatusBar + 'px'}]">
					{{i18n['抢购免费拿']}}
				</view>
				<!-- #ifndef MP-WEIXIN -->
				<view class="right padding-right text-white" @click="toggleRuleModal">
					{{i18n['规则']}}
				</view>
				<!-- #endif -->
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="text-white rules" @click="toggleRuleModal" :style="{top:CustomBar + 5 +'px'}">
			{{i18n['规则']}}
		</view>
		<!-- #endif -->
		<!-- 背景 -->
		<view class="bargain-bg1"></view>
		<!-- 商品信息 -->
		<view class="bargain-content relative padding-bottom-60">
			<view
				class="goods-info width-323 height-433 margin-left-222 radius-16 flex flex-direction justify-center align-center">
				<view class="fu-block-220 radius overHidden">
					<fu-image :src="detail.goods_thumb" mode="aspectFill"></fu-image>
				</view>
				<text class="info-text text-df margin-top-sm text-white text-lg text-cut">{{detail.goods_name}}</text>
				<text
					class="info-text2 width-240 margin-top-sm radius-60 padding-tb-xs   text-center">￥{{detail.activity_price}}</text>
			</view>
			<!-- 抢购信息 -->
			<view class="bargain-info margin-lr margin-top-60 margin-bottom radius-16">
				<view class="action-bg relative radius-32 padding-top-140 padding-lr padding-bottom-90">
					<view
						class="bg-top-txt height-94 width-432 line-height-94 text-bold fu-fs40 text-white	text-center">
						{{i18n['邀请好友砍一刀']}}
					</view>
					<!-- 抢购中 start -->
					<view class="flex flex-direction text-bold justify-center align-center" v-if="is_bargain==1">
						<text class="color-9a4 text-df">{{i18n['已砍']}}<text
								class="fu-fs48 text-prices">{{detail.cut_price}}{{i18n['元']}}</text>,{{i18n['仅差']}}<text
								class="fu-fs48 text-prices">{{detail.k_rate}}%</text>{{i18n['就可免费拿走']}}</text>

					</view>
					<!-- 抢购中 end -->
					<!-- 抢购成功 start -->
					<view class="flex flex-direction justify-center align-center" v-if="is_bargain==2">
						<text class="info-price height-100 text-bold text-prices margin-top-sm fu-fs48">
							<text class="price">{{this.type!='bargainShare'? i18n['恭喜您！抢购成功']: i18n['好友已抢购成功']}}</text>
						</text>
					</view>
					<!-- 抢购成功 end -->
					<!-- 抢购失败 start -->
					<view class="flex flex-direction justify-center align-center" v-if="is_bargain==3">
						<text class="info-price height-100 text-bold text-prices margin-top-sm fu-fs48">
							<text class="price">{{i18n['很遗憾，抢购失败']}}</text>
						</text>
					</view>
					<!-- 抢购失败 end -->
					<view class="margin-top">
						<view class="cu-progress relative round margin-top-xs">
							<view class="button-color round" :style="[{ width: (100 - detail.k_rate)+'%'}]">

							</view>
							<view class="line-circle height-28 w100">
								<view class="line-item left1 width-14 line-height-14 height-14 radius-100"></view>
								<view class="line-item left2 width-14 line-height-14 height-14 radius-100"></view>
								<view class="line-item left3 width-14 line-height-14 height-14 radius-100"></view>
							</view>
						</view>
						<view class=" relative text-sm flex padding-lr-20 justify-between margin-top-10 color-9a4">
							<view class="line-cup left1 ">20%</view>
							<view class="line-cup left2  ">50%</view>
							<view class="line-cup left3  ">90%</view>
						</view>
					</view>
				</view>
				<view class="margin-top">
					<!-- #ifndef MP-WEIXIN -->
					<button class="action-button height-88 button-color text-bold fu-fs40  cu-btn round"
						@tap="handleJump" data-url="/pages/activity/bargain/bargain-list/index"
						v-if="is_bargain==3">{{i18n['重新发起']}}</button>
					<button class="action-button height-88 button-color text-bold fu-fs40 cu-btn round"
						@click="shareFriend" v-if="is_bargain==1">{{i18n['邀请好友帮砍']}}</button>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<button class="action-button height-88 button-color text-bold fu-fs40 cu-btn round"
						open-type="share" v-if="is_bargain==3">{{i18n['重新发起']}}</button>
					<button class="action-button height-88 button-color text-bold fu-fs40 cu-btn round"
						open-type="share" v-if="is_bargain==1">{{i18n['邀请好友帮砍']}}</button>
					<!-- #endif -->
				</view>
			</view>
			<!-- 抢购记录 -->
			<view class="list margin-top-50 margin-lr radius-32">
				<view class="list-title height-94 fu-fs40 text-center text-white width-432 line-height-94">
					{{i18n['抢购记录']}}
				</view>
				<view class="list-content padding">
					<block v-for="(item,index) in logs" :key="index">
						<view class="list-item height-140 flex align-center">
							<view class="fu-block-80 overHidden radius-100 margin-right-sm ">
								<fu-image :src="item.head_img" mode="aspectFill"></fu-image>
							</view>
							<view class="info flex1 ">
								<view>{{item.user_nickname}}</view>
								<view class="text-sm margin-top-xs">{{i18n['使用抢购道具狂砍一刀']}}</view>
							</view>
							<view class="text-color-2 text-bold">{{i18n['砍掉']}}{{item.cut_price}}{{i18n['元']}}</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<!-- 活动规则 -->
		<fu-popup v-model="showRuleModal" mode="center" width="500rpx" height="700rpx" border-radius="16"
			:mask-custom-style="{background: 'rgba(0,0,0,0.65)'}" :mask-close-able="false">
			<view class="rule-box bg-white">
				<view class=" height-100 text-lg line-height-100 text-center text-bold text-333 solid-bottom">
					{{i18n['活动规则']}}
				</view>
				<scroll-view class="rule-box-content text-333 padding-20 text-df" scroll-y>
					<jyf-parser :html="rules"></jyf-parser>
				</scroll-view>
				<view class="height-100 text-lg line-height-100 text-center  text-theme solid-top"
					@click="toggleRuleModal">
					{{i18n['关闭']}}
				</view>
			</view>
		</fu-popup>
		<!-- 活动规则 -->
		<fu-popup v-model="bargainPop" mode="center" width="560rpx" height="700rpx" border-radius="16"
			:mask-custom-style="{background: 'rgba(0,0,0,0.65)'}" :mask-close-able="false">
			<view class="rule-box bg-white padding">
				<view class="  text-right">
					<text class="cuIcon-roundclose text-333 text-xxl" @tap='bargainPop=false'></text>
				</view>
				<view class="flex align-center justify-center flex-direction ">
					<fu-image :src="friendInfo.head_img" mode="aspectFill" class="fu-block-120 radius-100"
						v-if="friendInfo.head_img">
					</fu-image>
					<view class=" margin-tb-sm text-df" v-if="friendInfo.user_name">{{friendInfo.user_name}} </view>
					<view class=" text-sm text-prices">{{i18n['谢谢你，帮我砍一刀']}} </view>
					<view class="bg-f8 flex align-center margin-tb width-450 padding-sm">
						<view class="fu-block-108 radius-16 overHidden flex-shrink">
							<fu-image :src="detail.goods_thumb" mode="aspectFill" class="fu-block-108 radius-16">
							</fu-image>
						</view>
						<view class="margin-left-sm flex-direction flex  justify-between">
							<view class="text-cut-2 text-bold text-df text-333">{{detail.goods_name||''}} </view>
							<view class=" margin-top-xs ">
								<text class="text-prices margin-right-sm text-price">{{detail.activity_price||0}}</text>
								<text class="text-through text-sm text-999">￥{{detail.goods_money||0}}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="bg-theme margin-lr margin-top text-white text-center radius-60 padding-tb-20 "
					@click="helpBargainCut">
					{{i18n['帮他砍一刀']}}
				</view>
			</view>
		</fu-popup>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '@/common/config.js';
	import richText from '@/common/utils/richText.js';
	export default {
		data() {
			return {
				showNavbar: false,
				logs: [],
				detail: {},
				bargain_id: '',
				timer: null,
				bargainPop: false, //帮砍弹框
				showRuleModal: false, // 显示规则弹窗
				rules: "", // 抢购规则
				order_sn: '', //抢购订单编号
				type: '', //bargainShare  其他人进入帮抢购
				friendInfo: {
					user_name: '',
					head_img: ''
				}, //好友信息
				is_bargain: '', //抢购状态 1 抢购中    2抢购成功    3抢购失败
			}
		},
		computed: {
			style() {
				let StatusBar = this.StatusBar;
				let CustomBar = this.CustomBar;
				let isShow = this.showNavbar;
				if (isShow) {
					return `height:${CustomBar}px;padding-top:${StatusBar}px;background: #ff5834;`;
				} else {
					return `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				}
			},
			userInfo() {
				return this.$store.getters.userInfo || {};
			},
		},
		onPageScroll(e) {
			// let scrollTop = e.scrollTop;
			// if (scrollTop >= 10) {
			// 	this.showNavbar = true;
			// } else {
			// 	this.showNavbar = false;
			// }
		},
		onLoad(options) {
			console.log(options);
			const {
				order_sn,
				type,
				user_name,
				head_img
			} = options;
			this.order_sn = order_sn
			this.friendInfo.user_name = user_name || '昵称',
				this.friendInfo.head_img = head_img || '',
				this.type = options.type
			this.getBargainDetail();
			if (options.type == 'bargainShare') {
				setTimeout(() => {
					this.bargainPop = true
				}, 300)
			} else {}
			// this.getBargainRecord();
			this.timer = setInterval(() => {
				this.getBargainDetail();
				// this.getBargainRecord();
				// this.getBargainType();
			}, 5000)
			this.getBargainRuleData();
		},
		onUnload() {
			this.timer && clearInterval(this.timer);
			this.timer = null;
		},
		onShareAppMessage(res) {
			return {
				title: this.i18n['我在抢购免费拿'] + this.detail.goods_name + ',' + this.i18n['借你大刀砍一砍~'],
				path: '/pages/activity/bargain/help-bargain/index?bargain_id=' + this.bargain_id + '&order_sn=' + this.order_sn +
					'&type=bargainShare&user_name=' + (global.userInfo && global.userInfo.user_nickname) + '&head_img=' + (global.userInfo && global.userInfo.head_img) + '&phone=' + (global.userInfo && global.userInfo._mobile) + '&invite_code=' + (global.userInfo && global.userInfo.invite_code) + '&goods_name=' + this.detail.goods_name,
				imageUrl: this.detail.goods_thumb,
			}
		},
		methods: {
			// 返回
			back() {
				uni.navigateBack();
			},
			// 好友帮砍
			helpBargainCut() {
				this.$api.post(global.apiUrls.postFriendCut, {
						order_sn: this.order_sn
					})
					.then(res => {
						this.$message.info(res.data.msg);
						if (res.data.code == 1) {
							this.bargainPop = false
							this.getBargainDetail()
						} else {
							this.bargainPop = false
							this.$message.info(res.data.msg);
						}
					})
			},
			// 切换规则弹窗显示与否
			toggleRuleModal() {
				this.showRuleModal = !this.showRuleModal;
			},
			// 邀请好友帮砍
			shareFriend() {
				let downloadUrl = uni.getStorageSync('downloadUrl');
				let href = BASE_URL + '/register/h5/#/pages/bargain-log/index?order_sn=' + this.order_sn +
					'&type=bargainShare&user_name=' + (global.userInfo && global.userInfo.user_nickname) + '&head_img=' +
					(global.userInfo && global.userInfo
					.head_img) + '&phone=' + (global.userInfo && global.userInfo._mobile) + '&invite_code=' + (global
					.userInfo && global.userInfo.invite_code)
				console.log(href, 'hrefs')
				uni.share({
					provider: 'weixin',
					type: '0',
					title: this.i18n['我在抢购免费拿'] + this.detail.goods_name + ',' + this.i18n['借你大刀砍一砍~'],
					scene: 'WXSceneSession',
					href: href,
					imageUrl: this.detail.goods_thumb,
					success: (res) => {
						console.log("1111", res);
					},
					fail: (err) => {
						console.log('222222', err)
					}
				})
			},
			// 获取抢购记录
			getBargainRecord() {
				this.$api.post(global.apiUrls.postBargainRecord, {
						bargain_id: this.bargain_id
					})
					.then(res => {
						if (res.data.code == 1) {
							this.logs = res.data.data.data;
						}
					})
			},
			// 抢购详情
			getBargainDetail() {
				this.$api.post(global.apiUrls.postBargainDetailInfo, {
						order_sn: this.order_sn
						// user_id: global.userInfo.id
					})
					.then(res => {
						if (res.data.code == 1) {
							this.detail = res.data.data;
							this.logs = res.data.data.child;
							this.is_bargain = res.data.data.is_bargain;
							if (res.data.data.is_bargain == 2) {
								// 抢购成功  /0 没抢购  1抢购中 2抢购成功 3抢购失败 
								this.timer && clearInterval(this.timer);
								// this.$message.info(this.i18n['恭喜你,抢购成功']);
								setTimeout(() => {
									// this.$urouter.navigateTo('/pages/order/order-list/all-order/index')
								}, 800)
							}
						}
					})
			},
			// 是否抢购成功
			getBargainType() {
				this.$api.post(global.apiUrls.postBargainSuccess, {
						bargain_id: this.bargain_id
					})
					.then(res => {
						if (res.data.code == 1) {
							this.timer && clearInterval(this.timer);
							this.$message.info(this.i18n['恭喜你,抢购成功']);
							setTimeout(() => {
								// this.$urouter.navigateTo('/pages/order/order-list/all-order/index')
							}, 800)
						}
					})
			},
			// 抢购规则
			getBargainRuleData() {
				this.$api.post(global.apiUrls.postOperationGetColumn, {
					category_id: 11,
				}).then(res => {
					var res = res.data
					if (res.code == 1) {
						this.rules = richText.format(res.data.content);
					} else {
						this.rules = ''
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: rgb(255, 3, 42);
		padding-bottom: 160rpx;
		height: 100vh;

	}

	.page {
		background: rgb(255, 3, 42);
	}

	.bg-top1 {
		background: url($IMG_BASE_URL+'/activity/bargain1.png');
		background-size: 100%;
		height: 100%;
	}

	.rules {
		position: fixed;
		right: 32rpx;
	}

	.bargain-bg1 {
		height: 100%;
		background: url($IMG_BASE_URL+'/activity/bargain1.png');
		background-size: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.bargain-content {
		z-index: 10;
		height: 100%;
		padding-top: 20vh;

	}

	.goods-info {
		background: linear-gradient(#FEF9EA, #FCE6BB);

		.info-text {
			max-width: 280rpx;
			color: #9B6839;
		}

		.info-text2 {
			background: linear-gradient(#FDEFCF, #FDDE55);
			border: 2px solid rgb(248, 149, 31);
			color: #9B6839;

		}
	}

	.color-9a4 {
		color: #9A442A;
	}

	.cu-progress {
		background: #FFCE64;
	}

	.line-circle {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 100;
	}

	.line-item {
		background-color: #FDB481;
		position: absolute;

	}

	.line-cup {
		position: absolute;
		margin-left: -16rpx;
	}

	.left1 {
		left: 20%;
	}

	.left2 {
		left: 50%;
	}

	.left3 {
		left: 90%;
	}

	.bargain-info {
		.action-bg {
			z-index: 100;
			background: linear-gradient(#FEF4D4, #FEE8B0);
			width: 686rpx;
		}

		.bg-top-txt {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			margin: auto;
			background: url($IMG_BASE_URL+'/activity/bg-1.png');
			background-size: 100%;
		}

		.info-price {

			.price {
				display: inline-block;
				animation: heart 1.2s linear infinite reverse;
			}
		}

		.action-button {
			width: 100%;
			color: #9A442A;
			background: linear-gradient(#FDEFCF, #FDDE55);
			border: 2px solid #FC8B06;
			// animation: heart 0.8s infinite;
		}
	}

	.list {
		background: linear-gradient(#FEF4D4, #FEE8B0);

		.list-title {
			background: url($IMG_BASE_URL+'/activity/bg-1.png');
			background-size: 100%;
			margin: auto;
		}

		.list-content {
			border-radius: 0 0 16rpx 16rpx;

			.list-item {
				.info {
					color: #9A442A;

				}
			}
		}
	}

	// 规则弹窗
	.rule-box {
		width: 100%;
		height: 100%;

		.rule-box-content {
			height: calc(100% - 200rpx);
		}


	}

	.line-eee {
		border: 1px solid #EEEEEE;
	}

	.button-color {
		background: linear-gradient(270deg, #f3400a, #fa9500);
	}


	.text-color-2 {
		color: #9A442A;
	}

	@keyframes heart {
		0% {
			transform: scale(1);
		}

		60% {
			transform: scale(0.8);
		}

		100% {
			transform: scale(1);
		}
	}

	// 公共样式 end
</style>
